<template>
	<view class="index">
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%;background-color: white;">
					
		</view>
		<view class="nav">
			<view class="nav-left" @click="Navpopup">
				<image src="@/static/TestImg/img/indexImg/icon-san.png" mode=""></image>
			</view>
			<view class="nav-center">
				<u-sticky bgColor="#fff">
					<u-tabs :list="list" @click="click" lineColor="#f72647" lineWidth="60rpx" lineHeight="4rpx"
						:activeStyle="{
						color:'#323232',
						fontWeight:'600',
					}" :inactiveStyle="{
						color:'#8b8b8b',
						fontSize:'30rpx'
					}" :current="current"></u-tabs>
				</u-sticky>
			</view>
			<view class="nav-right" @click="seek">
				<image src="@/static/TestImg/img/indexImg/seek.png" mode="" @click="seek"></image>
			</view>
			<view class="LeftPopup">
				<u-popup :show="LeftPopup" mode="left" @close="close">
					<sidebar></sidebar>
				</u-popup>
			</view>
		</view>
		<attention v-if="attention"></attention>
		<find v-if="find" :findCon="findCon" :ffive="ffive" @noAdd="noAdd"></find>
		<nearby v-if="nearby"></nearby>

	</view>
</template>

<script>
	import sidebar from '@/pages/index/components/sidebar.vue';
	import attention from '@/pages/index/components/attention.vue'
	import find from '@/pages/index/components/find.vue';
	import nearby from '@/pages/index/components/nearby.vue';
	export default {
		components: {
			sidebar,
			attention,
			find,
			nearby
		},
		data() {
			return {
				list: [{
						name: "关注"
					},
					{
						name: "发现"
					},
					{
						name: "附近"
					}
				],
				current: 1,
				LeftPopup: false,
				attention: false,
				find: true,
				nearby: false,
				page: 1,
				findCon: 1,
				ffive: 0,
				status: ""
			}
		},
		onPullDownRefresh() {
			this.ffive++;
			this.status="";
			this.page = 1;
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止页面加载动画
			}, 1000);
		},

		onReachBottom() {
			if (this.status != "nomore") {
				this.page++;
				// console.log(this.page);
				this.findCon = this.page;
			}

		},
		methods: {
			click(e) {
				if (e.index == 0) {
					this.attention = true;
					this.find = false;
					this.nearby = false;
				} else if (e.index == 1) {
					this.find = true;
					this.attention = false;
					this.nearby = false;
					this.status="";
					console.log(this.status);
				} else if (e.index == 2) {
					this.find = false;
					this.attention = false;
					this.nearby = true;
				}
			},
			Navpopup() {
				this.LeftPopup = !this.LeftPopup
			},
			close() {
				this.LeftPopup = !this.LeftPopup
			},
			seek() {
				uni.navigateTo({
					url: "/pages/searchBox/searchBox"
				})
			},
			noAdd(e) {
				this.status = e
			}
		}
	}
</script>

<style scoped>
	.status_bar{
		background-color: white;
	}
	.nav {
		width: 100%;
		height: 100rpx;
		background-color: white;
		position: fixed;
		z-index: 5000;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		flex-wrap: wrap;
	}

	.nav-right,
	.nav-left {
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-left image {
		width: 40%;
		height: 67%;
		object-fit: cover;
		object-position: center;

	}

	.nav-center {
		width: 60%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.nav-right image {
		width: 35%;
		height: 60%;
		object-fit: cover;
		object-position: center;
	}
</style>